<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

*{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            div{
                width: 520px;
                height: 280px;
                margin:100px auto;
                position: relative;
                overflow: hidden;
            }
            ul{
                width: 9999px;
            }
            ul li{
                float: left;
            }
            ol{
                position: absolute;
                bottom:10px;
                left: 50%;
                transform: translateX(-50%);
            }
            ol li{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background:white;
                float: left;
                margin:0px 4px;
                cursor: pointer;
            }
            span{
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                background:green;
                cursor: pointer;
            }
            span:nth-of-type(1){
                left: 10px
            }
            span:nth-of-type(2){
                right: 10px
            }
            .current{
                background:#f60;
            }
        
    </style>
</head>
<body>
    <div id="wrap">
    
        <ul id="box" style="transform: translateX(0px);">
            <li><img src="images/sa.jpg" alt=""></li>
            <li><img src="images/sd.jpg" alt=""></li>
            <li><img src="images/sf.jpg" alt=""></li>
            <li><img src="images/xc.jpg" alt=""></li>
        </ul>
     
        <ol id="list">
            <li class="current"></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
        </ol>
      
        <span class="left" id="left">左</span>
        <span class="right" id="right">右</span>
    </div>
   <script>
 
    var box=document.getElementById('box');
    var wrap=document.getElementById('wrap');
    var left=document.getElementById('left');
    var right=document.getElementById('right');
 
    var list=document.getElementById('list').children;
    var num=0;
    var timer;
   
    function fn(){
        timer=setInterval(function(){
            num++;
            if(num>3){
                num=0
            }
          
            for(var j=0;j<list.length;j++){
                list[j].className='';
            }
            list[num].className='current';
            n=-520*num;
            box.style.transform='translateX('+n+'px)'
        },1000)
    }
 
    fn()
  
    wrap.onmouseenter=function(){
     
        clearInterval(timer)
    }
  
    wrap.onmouseleave=function(){
        fn()
    }
   
    for(var i=0;i<list.length;i++){
       
        list[i].index=i;
        list[i].onclick=function(){
            for(var j=0;j<list.length;j++){
                list[j].className='';
            }
            this.className='current';
           
            num=this.index;
            n=-520*num;
            box.style.transform='translateX('+n+'px)'
        }
    }

 
    right.onclick=function(){
         num++;
            if(num>3){
                num=0
            }
           
            for(var j=0;j<list.length;j++){
                list[j].className='';
            }
            list[num].className='current';
            n=-520*num;
            box.style.transform='translateX('+n+'px)'
    }
    left.onclick=function(){
         num--;
            if(num<0){
                num=3
            }
           
            for(var j=0;j<list.length;j++){
                list[j].className='';
            }
            list[num].className='current';
            n=-520*num;
            box.style.transform='translateX('+n+'px)'
    }
    
</script> 
</body>
</html>